<!--
 * Vue应用根组件
 * 
 * 功能说明：
 * 1. 作为整个应用的根组件，所有页面都在这里渲染
 * 2. 检查用户登录状态，未登录时跳转到登录页
 * 3. 提供全局样式设置
 * 

-->
<template>
  <div id="app">
    <!-- router-view是Vue Router的出口，会根据当前路由渲染对应的组件 -->
    <!-- 比如访问/student时，会渲染学生相关组件 -->
    <!-- 访问/teacher时，会渲染教师相关组件 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App', // 组件名称
  created() {
    // 组件创建时执行，检查用户登录状态
    // 从cookie中获取用户token和角色信息
    var token = this.$cookies.get("rb_token"); // 用户登录令牌
    var role = this.$cookies.get("rb_role");   // 用户角色（学生/教师/管理员）
    
    // 如果token或role为空，说明用户未登录，跳转到登录页
    if(token == null || token == "" || role == null || role == "") {
      this.$router.push({path: '/' }) // 跳转到登录页面
    }
    // 注意：这里有个bug，role的判断条件写错了，应该是role == ""
  }
}
</script>

<style>
/* 全局样式设置 */

/* 移除所有列表的默认样式（小圆点） */
ul {
  list-style: none;
}

/* 移除所有链接的下划线 */
a {
  text-decoration: none;
}

/* 重置所有元素的默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

/* 应用根容器的样式 */
#app {
  /* 设置字体，优先使用微软雅黑，然后是其他字体 */
  font-family: "Microsoft YaHei", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  /* 设置背景色为浅灰色 */
  background-color: #eee;
}
</style>
